<template>
    <div id="Head">
        <el-row>
            <el-col :span="3">
                <div class="grid-content bg-purple cursor" style="text-align: center;
              user-select: none;"
                     @click="$router.push('/')">
                    MISTY
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple-light" style="display: flex;justify-content: space-between;">
                    <div class="grid-content-con1 transform1vh">
                        <a href="/" :class="{active:this.active == 1}" @click="this.active = 1">首页</a>
                        <a :class="{active:this.active == 2}" @click="this.active = 2">博客</a>
                        <a :class="{active:this.active == 3}" @click="this.active = 3">课程</a>
                        <a :class="{active:this.active == 4}" @click="this.active = 4">问答</a>
                        <a :class="{active:this.active == 5}" @click="this.active = 5">社区</a>
                        <a :class="{active:this.active == 6}" @click="this.active = 6">专区</a>
                        <span>
             <el-dropdown style="color: black">
                      <span class="el-dropdown-link" style="font-size: 18px;font-weight: normal">
                        发现
                      </span>
<!--               <template #dropdown>-->
<!--                 <el-dropdown-menu>-->
<!--                   <el-dropdown-item>小组</el-dropdown-item>-->
<!--                   <el-dropdown-item>收藏</el-dropdown-item>-->
<!--                   <el-dropdown-item>招聘</el-dropdown-item>-->
<!--                   <el-dropdown-item>找找看</el-dropdown-item>-->
<!--                   <el-dropdown-item @click="$router.push('/guestbook')">留言板</el-dropdown-item>-->
<!--                 </el-dropdown-menu>-->
<!--               </template>-->
             </el-dropdown>
           </span>
                    </div>
                    <div class="grid-content-con2">
                        <el-autocomplete
                                class="ForeHead-el-autocomplete"
                                v-model="blogSearch"
                                :fetch-suggestions="blogSearchList"
                                :trigger-on-focus="false"
                                placeholder="探索MISTY"
                                @select="handleSelect"
                                @change="handleChange"
                                @input="handleChange"
                        >
                            <template #suffix>
                                <el-button type="primary">
                                    <el-icon :size="18">
                                        <Search @click="routeToIndex"/>
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-autocomplete>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <div class="grid-content-con1" style="display: flex;justify-content: center">
                        <div v-if="judgePerson()" class="foreHead-user">
                            <a>
                                <!--                创作者中心-->
                                <el-dropdown ref="dropdown0" trigger="click" popper-class="foreHead-el-dropdown0">
                  <span class="el-dropdown-link ">
                    <el-badge class="item">
                      <el-icon size="25" color="#8a919f"><Edit/></el-icon>
                    </el-badge>
                  </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="$router.push('/publish')">写文章
                                            </el-dropdown-item>
<!--                                            <el-dropdown-item>发沸点</el-dropdown-item>-->
<!--                                            <el-dropdown-item>写笔记</el-dropdown-item>-->
<!--                                            <el-dropdown-item>写代码</el-dropdown-item>-->
<!--                                            <el-dropdown-item>草稿箱</el-dropdown-item>-->
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>

                                <!--                消息通知-->
                                <el-dropdown popper-class="foreHead-el-dropdown">
                  <span class="el-dropdown-link ">
                    <el-badge :value="12" class="item">
                      <el-icon size="25" color="#8a919f"><Bell/></el-icon>
                    </el-badge>
                  </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
<!--                                            <el-dropdown-item>评论</el-dropdown-item>-->
<!--                                            <el-dropdown-item>点赞</el-dropdown-item>-->
<!--                                            <el-dropdown-item>关注</el-dropdown-item>-->
                                            <el-dropdown-item @click="$router.push('/chat')">私信</el-dropdown-item>
<!--                                            <el-dropdown-item>-->
<!--                                                <el-badge :value="12" class="item">-->
<!--                                                    系统信息-->
<!--                                                </el-badge>-->
<!--                                            </el-dropdown-item>-->
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                                <!--                个人中心-->
                                <el-dropdown ref="dropdown1" trigger="click" popper-class="foreHead-el-dropdown2">
                  <span class="el-dropdown-link">
                    <el-badge class="item">
                      <div class="block">
                        <el-avatar :size="40" :src="circleUrl"/>
                      </div>
                    </el-badge>
                  </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="$router.push('/person/' + getUserId)">个人中心
                                            </el-dropdown-item>
<!--                                            <el-dropdown-item>个人图书</el-dropdown-item>-->
                                            <el-dropdown-item @click="$router.push('/publish')">发布文章
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="$router.push('/guestbook')">留言板</el-dropdown-item>
                                            <el-dropdown-item @click="changePath(4)">聊天室</el-dropdown-item>
                                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>

                            </a>
                        </div>
                        <div v-else class="ForeHead-login">
                            <!--              <a @click="$router.push('/login')">登录</a>-->
                            <a @click="toggleLogin()">登录</a>
                            <div></div>
                            <a @click="$router.push('/register')">注册</a>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="el-row-second" v-if="$route.path == '/'">
            <el-col :span="4"></el-col>
            <el-col :span="14">
                <div class="grid-content-con1 foreHead-nav">
                    <a :class="{ active:this.navActive == index }" @click="changeNav(index)"
                       v-for="(item,index) in navList" :key="index">
                        {{ item }}
                    </a>
                    <!--          <a :class="{active:this.navActive == 2}" @click="this.navActive = 2">后端</a>-->
                    <!--          <a :class="{active:this.navActive == 3}" @click="this.navActive = 3">前端</a>-->
                    <!--          <a :class="{active:this.navActive == 4}" @click="this.navActive = 4">Android</a>-->
                    <!--          <a :class="{active:this.navActive == 5}" @click="this.navActive = 5">iOS</a>-->
                    <!--          <a :class="{active:this.navActive == 6}" @click="this.navActive = 6">人工智能</a>-->
                    <!--          <a :class="{active:this.navActive == 7}" @click="this.navActive = 7">开发工具</a>-->
                    <!--          <a :class="{active:this.navActive == 8}" @click="this.navActive = 8">代码人生</a>-->
                    <!--          <a :class="{active:this.navActive == 9}" @click="this.navActive = 9">阅读</a>-->
                </div>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>

        <ForeLogin></ForeLogin>
    </div>
</template>

<script>
import request from "../utils/request";
import {ArrowDown, Bell, Edit} from '@element-plus/icons'
import {Search} from '@element-plus/icons'
import {fetchSuggest} from '@/api/blog/blog'
import {mapState, mapGetters, mapActions, mapMutations} from "vuex";
import ForeLogin from "components/blog/ForeLogin.vue";


export default {
    name: 'ForeHead',

    components: {
        ArrowDown,
        Search,
        Bell,
        Edit,
        ForeLogin
    },

    data() {
        return {
            blogSearch: '',
            // blogSearchList:[],
            Search: '',
            restaurantList: [],
            active: 1,
            navActive: 0,
            timeout: '',
            // resLink:'',
            circleUrl: '',
            userSeeion: '',
            navList: ["综合", "后端", "前端", "Android", "iOS", "人工智能", "开发工具", "代码人生", "阅读"],
        }
    },

    watch: {
        overallNav(newVal, oldVal) {
            this.navActive = newVal;
        },
        isLogin(newVal, oldVal) {
            //
            // if(newVal == oldVal)return
            if (newVal == true) {
                console.log("this.sessionStorage.getItem(\"photo\")",sessionStorage.getItem("photo"))
                this.circleUrl = sessionStorage.getItem("photo");
            }
            // console.log("this.search", this.search)
        },
    },

    provide() {
        return {
            foreHead_judgePerson: this.judgePerson
        }
    },

    computed: {
        ...mapGetters("user", ["GET_TOKEN", "GET_CURRENTUSER", "GET_CURRENTUSERID"]),
        ...mapGetters("app", ["GET_LOGIN"]),
        ...mapState("app", ["overallNav"]),
        getUserId() {
            return sessionStorage.getItem("userId") ? JSON.parse(sessionStorage.getItem("userId")) : ''
        },
        isLogin() {
            return this.$store.state.user.isLogin;
        },
    },

    created() {
        // console.log('judgePerson', this.judgePerson())
    },

    mounted() {
        // this.fetchSuggest()
    },

    methods: {
        ...mapMutations("app", ["TOGGLE_LOGIN", "CHANGE_NAV"]),
        ...mapActions('user', ['ForeLogOut']),
        judgePerson() {
            this.userSeeion = sessionStorage.getItem("user")
            if (!this.userSeeion || this.userSeeion == null || this.userSeeion == '') {
                return false
            } else {
                return true
            }
        },
        routeToIndex() {
            this.$store.commit("blog/SET_BLOGSEARCH", this.blogSearch);
            // console.log("this.$store.state.blogSearch;",this.$store.state.blog.blogSearch)
            this.$router.push({
                name: "ForeHome",
                // state: {blogSearch: this.blogSearch}
            })
            this.blogSearch = "";
        },
        /*   获取建议  */
        fetchSuggest() {
            // console.log("this.blogSearch",this.blogSearch)
            fetchSuggest({
                search: this.blogSearch,
                pageNum: 1,
                pageSize: 10
            }).then((res) => {
                if (res.code == 0) {
                    // console.log("res.data",res.data)
                    this.restaurantList = res.data
                }
            })
        },

        logout() {
            request.post("/user/logout").then(res => {
                if (res.code === 0) {
                    this.ForeLogOut()
                    this.curUser = {}
                    this.$router.push('/')
                    location.reload()
                }
            })
        },

        // createFilter(queryString) {
        //   return this.restaurantList.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // },

        handleChange(value) {
            // console.log("this.blogSearch",this.blogSearch)
            // this.blogSearch = value
            this.fetchSuggest()
        },

        handleSelect(restaurantItem) {
            console.log(restaurantItem)
        },
        blogSearchList(queryString, callback) {
            if (queryString == '' && queryString == null) return
            // let query = queryString.toLowerCase()
            // console.log("queryString",queryString)
            // console.log("this.restaurantList",this.restaurantList)
            let results = queryString
                // ? restaurants.value.filter(this.createFilter(queryString))
                ? this.restaurantList.filter((res) => res.indexOf(queryString) != -1)
                : this.restaurantList
            results = results.map((result) => {
                return {
                    "value": result
                }
            })
            // console.log("results", results)
            // call callback function to return suggestions
            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => {
                callback(results)
            }, 500)
        },
        toggleLogin() {
            this.TOGGLE_LOGIN();
            // console.log("GET_LOGIN",this.GET_LOGIN)
        },
        changeNav(index) {
            // this.navActive = index
            this.CHANGE_NAV(index)
        },
        changePath(pathVal) {
            switch (pathVal) {
                case 4:
                    this.$router.push({
                        name: 'ChatRoom',
                        query: {
                            charType: 'all'
                        }
                    });
                    break;
            }
        },
        // showDropdownClick(){
        //   // console.log("this.$refs.dropdown1",this.$refs.dropdown1)
        //   this.$refs.dropdown1.visible = true
        // },
        // showDropdownClick0(){
        //   this.$refs.dropdown0.visible = true
        // }
    }
}
</script>

<style lang="less" scoped>
@import "../style/blog/ForeHead.less";
</style>
